<template>
  <div class="screen-container">
    <!-- 大屏标题区域 -->
    <header class="screen-header">
      <h1 class="screen-title">健康检查数据可视化大屏</h1>
      <div class="header-info">
        
        <button @click="goToDetail" class="btn-detail">进入详情</button>
      </div>
    </header>

    <!-- 核心数据指标区域 -->
    <div class="metrics-overview">
      <div class="metric-item">
        <div class="metric-icon bmi-icon">📊</div>
        <div class="metric-content">
          <span class="metric-number">{{ avgBmi > 0 ? avgBmi.toFixed(2) : '--' }}</span>
          <span class="metric-desc">平均BMI值</span>
        </div>
      </div>
      <div class="metric-item">
        <div class="metric-icon bp-icon">💓</div>
        <div class="metric-content">
          <span class="metric-number">{{ highBPpct > 0 ? highBPpct.toFixed(1) + '%' : '--%' }}</span>
          <span class="metric-desc">高血压比例</span>
        </div>
      </div>
      <div class="metric-item">
        <div class="metric-icon cholesterol-icon">📈</div>
        <div class="metric-content">
          <span class="metric-number">{{ highCholesterolPct > 0 ? highCholesterolPct.toFixed(1) + '%' : '--%' }}</span>
          <span class="metric-desc">高胆固醇比例</span>
        </div>
      </div>
      <div class="metric-item">
        <div class="metric-icon risk-icon">⚠️</div>
        <div class="metric-content">
          <span class="metric-number">{{ highRiskPct > 0 ? highRiskPct.toFixed(1) + '%' : '--%' }}</span>
          <span class="metric-desc">高风险人群占比</span>
        </div>
      </div>
    </div>

    <!-- 图表网格布局 -->
    <div class="chart-grid">
      <!-- BMI分布情况 -->
      <div class="chart-panel">
        <div class="panel-header">
          <div>
            <h3 class="panel-title">BMI分布情况</h3>
            <div class="panel-subtitle">基于健康检查数据统计</div>
          </div>
          <div class="bmi-legend">
            <div class="legend-item">
              <span class="legend-dot underweight"></span>
              偏瘦(<18.5)
            </div>
            <div class="legend-item">
              <span class="legend-dot normal"></span>
              正常(18.5-23.9)
            </div>
            <div class="legend-item">
              <span class="legend-dot overweight"></span>
              超重(24.0-27.9)
            </div>
            <div class="legend-item">
              <span class="legend-dot obese"></span>
              肥胖(≥28.0)
            </div>
          </div>
        </div>
        <div class="chart-wrapper">
          <div id="bmi-chart" style="width: 100%; height: 400px;"></div>
        </div>
      </div>

      <!-- 血压关系散点图 -->
      <div class="chart-panel">
        <div class="panel-header">
          <div>
            <h3 class="panel-title">血压关系散点图</h3>
            <div class="panel-subtitle">收缩压 vs 舒张压分布</div>
          </div>
        </div>
        <div class="chart-wrapper">
          <div id="blood-pressure-scatter" style="width: 100%; height: 400px;"></div>
        </div>
      </div>

      <!-- 年龄段健康指标 - 横向堆叠图 -->
      <div class="chart-panel">
        <div class="panel-header">
          <div>
            <h3 class="panel-title">年龄段健康指标</h3>
            <div class="panel-subtitle">各年龄段健康状况对比</div>
          </div>
        </div>
        <div class="chart-wrapper">
          <div id="age-health-chart" style="width: 100%; height: 400px;"></div>
        </div>
      </div>

      <!-- 胆固醇水平分布图表 -->
      <div class="chart-panel">
        <div class="panel-header">
          <div>
            <h3 class="panel-title">胆固醇水平分布</h3>
            <div class="panel-subtitle">不同人群胆固醇分布统计</div>
          </div>
        </div>
        <div class="chart-wrapper">
          <div id="cholesterol-chart" style="width: 100%; height: 400px;"></div>
        </div>
      </div>
    </div>

    <!-- 数据概览统计信息 -->
    <div class="data-overview">
      <div class="overview-item">
        <span class="overview-label">总检查人数:</span>
        <span class="overview-value">{{ healthData.length }}</span>
      </div>
      <div class="overview-item">
        <span class="overview-label">数据更新时间:</span>
        <span class="overview-value">{{ updateTime }}</span>
      </div>
      <div class="overview-item">
        <span class="overview-label">统计周期:</span>
        <span class="overview-value">2023-2024年度</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { useRouter } from 'vue-router';

// 路由实例
const router = useRouter();

// 跳转到详情页面 - 修改为指向现有路由
const goToDetail = () => {
  router.push('/statistician/data-export');
};
import * as echarts from 'echarts';
import * as XLSX from 'xlsx';

// 数据存储
const healthData = ref([]);
const avgBmi = ref(0);
const highBPpct = ref(0);
const highCholesterolPct = ref(0);
const highRiskPct = ref(0);
// 添加更新时间
const updateTime = ref('')
// 存储图表实例
let charts = {};

// 加载Excel数据（新增数据校验）
const loadExcelData = async () => {
  try {
    const response = await fetch('/健康检查数据集.xlsx');
    // 检查文件请求状态
    if (!response.ok) throw new Error(`文件请求失败：${response.status}`);
    
    const arraybuffer = await response.arrayBuffer();
    const workbook = XLSX.read(arraybuffer, { type: 'array' });
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    const jsonData = XLSX.utils.sheet_to_json(worksheet);

    // 校验核心字段是否存在
    const requiredFields = ['BMI', 'ap_hi', 'ap_lo', 'cholesterol', 'active', 'cardio', 'AgeinYr'];
    const missingFields = requiredFields.filter(field => 
      !jsonData.some(item => item.hasOwnProperty(field))
    );
    if (missingFields.length > 0) {
      throw new Error(`Excel缺少核心字段：${missingFields.join(', ')}`);
    }

    // 校验BMI字段是否有有效数值
    const hasValidBMI = jsonData.some(item => 
      !isNaN(Number(item.BMI)) && item.BMI > 0 && item.BMI <= 100
    );
    if (!hasValidBMI) {
      throw new Error('BMI字段无有效数据（需为1-100的数值）');
    }

    healthData.value = jsonData;
    calculateMetrics(jsonData);
    
    // 设置更新时间
    const now = new Date();
    updateTime.value = now.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });
    
    return jsonData;
  } catch (error) {
    console.error('加载Excel数据失败:', error);
    alert(`数据加载异常：${error.message}\n请检查文件路径和格式`);
    return [];
  }
};

// 计算关键指标（修复异常值过滤）
const calculateMetrics = (data) => {
  if (!data.length) {
    avgBmi.value = 0;
    highBPpct.value = 0;
    highCholesterolPct.value = 0;
    highRiskPct.value = 0;
    return;
  }

  // 1. 平均BMI（过滤异常值）
  const validBmiData = data.filter(item => 
    !isNaN(Number(item.BMI)) && item.BMI > 0 && item.BMI <= 100
  );
  const totalBmi = validBmiData.reduce((sum, item) => sum + Number(item.BMI), 0);
  avgBmi.value = validBmiData.length > 0 ? (totalBmi / validBmiData.length) : 0;

  // 2. 高血压比例（收缩压>140或舒张压>90，过滤异常血压值）
  const validBPData = data.filter(item => 
    !isNaN(Number(item.ap_hi)) && !isNaN(Number(item.ap_lo)) && 
    item.ap_hi > 0 && item.ap_lo > 0 && item.ap_hi > item.ap_lo
  );
  const highBP = validBPData.filter(item => item.ap_hi > 140 || item.ap_lo > 90).length;
  highBPpct.value = validBPData.length > 0 ? (highBP / validBPData.length) * 100 : 0;

  // 3. 高胆固醇比例（胆固醇>1，转换为数字类型）
  const validCholData = data.filter(item => 
    [1, 2, 3].includes(Number(item.cholesterol))
  );
  const highCholesterol = validCholData.filter(item => Number(item.cholesterol) > 1).length;
  highCholesterolPct.value = validCholData.length > 0 ? (highCholesterol / validCholData.length) * 100 : 0;

  // 4. 有风险因素人数占比（转换为数字类型）
  const highRisk = data.filter(item => 
    Number(item.smoke) === 1 || Number(item.alco) === 1 || 
    Number(item.active) === 0 || Number(item.cardio) === 1
  ).length;
  highRiskPct.value = (highRisk / data.length) * 100;
};

// 初始化BMI分布图 - 大屏优化版
const initBmiChart = (data) => {
  const chartDom = document.getElementById('bmi-chart');
  if (!chartDom) {
    console.error('BMI chart DOM not found');
    return;
  }
  
  // 设置自适应尺寸
  const parent = chartDom.parentElement;
  if (parent) {
    const width = parent.clientWidth || 400;
    const height = parent.clientHeight || 400;
    chartDom.style.width = width + 'px';
    chartDom.style.height = height + 'px';
  } else {
    chartDom.style.width = '100%';
    chartDom.style.height = '100%';
  }
  
  const bmiChart = echarts.init(chartDom);
  charts.bmi = bmiChart;
  
  // 计算BMI分布（使用过滤后的有效数据）
  const validBmiData = data.filter(item => 
    !isNaN(Number(item.BMI)) && item.BMI > 0 && item.BMI <= 100
  );
  const bmiStats = {
    underweight: validBmiData.filter(item => item.BMI < 18.5).length,
    normal: validBmiData.filter(item => item.BMI >= 18.5 && item.BMI < 24).length,
    overweight: validBmiData.filter(item => item.BMI >= 24 && item.BMI < 28).length,
    obese: validBmiData.filter(item => item.BMI >= 28).length
  };
  
  // 配色方案更新
  const bmiData = [
    { value: bmiStats.underweight, name: '偏瘦', itemStyle: { color: '#34d399' } },
    { value: bmiStats.normal, name: '正常', itemStyle: { color: '#60a5fa' } },
    { value: bmiStats.overweight, name: '超重', itemStyle: { color: '#fbbf24' } },
    { value: bmiStats.obese, name: '肥胖', itemStyle: { color: '#f87171' } }
  ];

  // 无数据时显示提示
  if (validBmiData.length === 0) {
    bmiChart.setOption({
      backgroundColor: 'transparent',
      title: {
        text: '无BMI数据可展示',
        left: 'center',
        top: '50%',
        textStyle: { color: '#f87171', fontSize: 16 }
      }
    });
    return;
  }
  
  // 大屏优化的配置
  bmiChart.setOption({
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        const percentage = params.value > 0 ? ((params.value / validBmiData.length) * 100).toFixed(1) + '%' : '0%';
        return `<div style="background: rgba(15, 23, 42, 0.9); border: 1px solid #3b82f6; padding: 10px; border-radius: 8px;">
          <div style="font-weight: bold; color: #ffffff; margin-bottom: 5px;">${params.name}</div>
          <div style="color: #38bdf8;">人数: ${params.value}</div>
          <div style="color: #38bdf8;">占比: ${percentage}</div>
        </div>`;
      },
      backgroundColor: 'transparent'
    },
    series: [
      {
        name: 'BMI分布',
        type: 'pie',
        radius: ['45%', '75%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: true,
        itemStyle: {
          borderRadius: 12,
          borderColor: 'rgba(15, 23, 42, 0.8)',
          borderWidth: 3,
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        label: {
          show: true,
          position: 'outside',
          formatter: function(params) {
            if (params.value === 0) return '';
            const percentage = ((params.value / validBmiData.length) * 100).toFixed(1);
            return `${params.name}\n${percentage}%`;
          },
          color: '#ffffff',
          fontSize: 12,
          fontWeight: 'bold',
          lineHeight: 18
        },
        emphasis: {
          scale: true,
          scaleSize: 10,
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold'
          },
          itemStyle: {
            shadowBlur: 20,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.8)'
          }
        },
        labelLine: {
          show: true,
          lineStyle: {
            color: '#475569',
            width: 1.5,
            type: 'solid'
          },
          length: 15,
          length2: 10
        },
        data: bmiData,
        // 添加动画效果
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function(idx) {
          return Math.random() * 200;
        },
        animationDuration: 1000
      }
    ]
  });
  
  charts.bmi = bmiChart;
};

// 初始化血压散点图 - 大屏优化版
const initBloodPressureChart = (data) => {
  const chartDom = document.getElementById('blood-pressure-scatter');
  if (!chartDom) {
    console.error('Blood pressure chart DOM not found');
    return;
  }
  
  // 设置自适应尺寸
  const parent = chartDom.parentElement;
  if (parent) {
    const width = parent.clientWidth || 400;
    const height = parent.clientHeight || 400;
    chartDom.style.width = width + 'px';
    chartDom.style.height = height + 'px';
  } else {
    chartDom.style.width = '100%';
    chartDom.style.height = '100%';
  }
  
  const scatterChart = echarts.init(chartDom);
  charts.bloodPressure = scatterChart;
  
  // 过滤有效数据并根据血压分级
  const normalData = [];
  const elevatedData = [];
  const hypertensionStage1Data = [];
  const hypertensionStage2Data = [];
  
  data.forEach(item => {
    const systolic = Number(item.ap_hi);
    const diastolic = Number(item.ap_lo);
    
    if (!isNaN(systolic) && !isNaN(diastolic) && systolic > 0 && diastolic > 0 && systolic > diastolic) {
      // 血压分级
      if (systolic < 120 && diastolic < 80) {
        normalData.push([diastolic, systolic]);
      } else if ((systolic >= 120 && systolic < 130) && diastolic < 80) {
        elevatedData.push([diastolic, systolic]);
      } else if ((systolic >= 130 && systolic < 140) || (diastolic >= 80 && diastolic < 90)) {
        hypertensionStage1Data.push([diastolic, systolic]);
      } else if (systolic >= 140 || diastolic >= 90) {
        hypertensionStage2Data.push([diastolic, systolic]);
      }
    }
  });
  
  // 限制数据量提升性能
  const allData = [...normalData, ...elevatedData, ...hypertensionStage1Data, ...hypertensionStage2Data].slice(0, 1000);

  // 无数据时显示提示
  if (allData.length === 0) {
    scatterChart.setOption({
      backgroundColor: 'transparent',
      title: {
        text: '无血压数据可展示',
        left: 'center',
        top: '50%',
        textStyle: { color: '#f87171', fontSize: 16 }
      },
      grid: { 
        left: '15%', 
        right: '10%', 
        bottom: '15%', 
        top: '10%',
        backgroundColor: 'rgba(59, 130, 246, 0.05)',
        borderColor: 'rgba(59, 130, 246, 0.2)',
        borderWidth: 1
      }
    });
    return;
  }
  
  // 大屏优化的血压散点图配置
  scatterChart.setOption({
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        const bpTypes = ['正常', '偏高', '高血压1期', '高血压2期'];
        const bpType = bpTypes[params.seriesIndex];
        return `<div style="background: rgba(15, 23, 42, 0.9); border: 1px solid ${params.color}; padding: 10px; border-radius: 8px;">
          <div style="font-weight: bold; color: ${params.color}; margin-bottom: 5px;">${bpType}</div>
          <div style="color: #ffffff;">舒张压: <span style="color: #38bdf8;">${params.data[0]}</span> mmHg</div>
          <div style="color: #ffffff;">收缩压: <span style="color: #38bdf8;">${params.data[1]}</span> mmHg</div>
        </div>`;
      },
      backgroundColor: 'transparent'
    },
    grid: {
      left: '15%',
      right: '10%',
      bottom: '15%',
      top: '12%',
      containLabel: true,
      backgroundColor: 'transparent',
      borderColor: 'rgba(59, 130, 246, 0.1)',
      borderWidth: 1
    },
    xAxis: {
      type: 'value',
      name: '舒张压 (mmHg)',
      nameLocation: 'middle',
      nameGap: 30,
      nameTextStyle: {
        color: '#94a3b8',
        fontSize: 12,
        fontWeight: 'bold'
      },
      axisLine: {
        lineStyle: {
          color: '#475569'
        }
      },
      axisLabel: {
        color: '#94a3b8',
        fontSize: 10
      },
      splitLine: {
        lineStyle: {
          color: '#1e293b',
          type: 'dashed',
          opacity: 0.5
        }
      },
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#60a5fa',
          opacity: 0.5
        }
      },
      min: 40,
      max: 120
    },
    yAxis: {
      type: 'value',
      name: '收缩压 (mmHg)',
      nameLocation: 'middle',
      nameGap: 40,
      nameTextStyle: {
        color: '#94a3b8',
        fontSize: 12,
        fontWeight: 'bold'
      },
      axisLine: {
        lineStyle: {
          color: '#475569'
        }
      },
      axisLabel: {
        color: '#94a3b8',
        fontSize: 10
      },
      splitLine: {
        lineStyle: {
          color: '#1e293b',
          type: 'dashed',
          opacity: 0.5
        }
      },
      min: 80,
      max: 220
    },
    // 添加自定义区域标记
    markArea: {
      silent: true,
      data: [
        // 高血压区域
        [
          { xAxis: 0, yAxis: 140 },
          { xAxis: 'max', yAxis: 'max' }
        ],
        [
          { xAxis: 90, yAxis: 0 },
          { xAxis: 'max', yAxis: 'max' }
        ]
      ],
      itemStyle: {
        color: 'rgba(248, 113, 113, 0.05)',
        borderColor: 'rgba(248, 113, 113, 0.2)',
        borderWidth: 1,
        borderType: 'dashed'
      }
    },
    series: [
      // 正常血压
      {
        name: '正常血压',
        type: 'scatter',
        symbolSize: 6,
        data: normalData.slice(0, 250),
        itemStyle: {
          color: '#34d399',
          opacity: 0.8,
          shadowBlur: 5,
          shadowColor: 'rgba(52, 211, 153, 0.5)'
        },
        emphasis: {
          itemStyle: {
            opacity: 1,
            shadowBlur: 10,
            shadowColor: 'rgba(52, 211, 153, 0.8)'
          },
          scale: true,
          scaleSize: 12
        },
        animationDelay: function(idx) {
          return idx * 3;
        }
      },
      // 血压偏高
      {
        name: '血压偏高',
        type: 'scatter',
        symbolSize: 6,
        data: elevatedData.slice(0, 250),
        itemStyle: {
          color: '#fbbf24',
          opacity: 0.8,
          shadowBlur: 5,
          shadowColor: 'rgba(251, 191, 36, 0.5)'
        },
        emphasis: {
          itemStyle: {
            opacity: 1,
            shadowBlur: 10,
            shadowColor: 'rgba(251, 191, 36, 0.8)'
          },
          scale: true,
          scaleSize: 12
        },
        animationDelay: function(idx) {
          return idx * 3;
        }
      },
      // 高血压1期
      {
        name: '高血压1期',
        type: 'scatter',
        symbolSize: 6,
        data: hypertensionStage1Data.slice(0, 250),
        itemStyle: {
          color: '#fb923c',
          opacity: 0.8,
          shadowBlur: 5,
          shadowColor: 'rgba(251, 146, 60, 0.5)'
        },
        emphasis: {
          itemStyle: {
            opacity: 1,
            shadowBlur: 10,
            shadowColor: 'rgba(251, 146, 60, 0.8)'
          },
          scale: true,
          scaleSize: 12
        },
        animationDelay: function(idx) {
          return idx * 3;
        }
      },
      // 高血压2期
      {
        name: '高血压2期',
        type: 'scatter',
        symbolSize: 6,
        data: hypertensionStage2Data.slice(0, 250),
        itemStyle: {
          color: '#f87171',
          opacity: 0.8,
          shadowBlur: 5,
          shadowColor: 'rgba(248, 113, 113, 0.5)'
        },
        emphasis: {
          itemStyle: {
            opacity: 1,
            shadowBlur: 10,
            shadowColor: 'rgba(248, 113, 113, 0.8)'
          },
          scale: true,
          scaleSize: 12
        },
        animationDelay: function(idx) {
          return idx * 3;
        }
      }
    ],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function(idx) {
      return idx * 5;
    }
  });
  
  charts.bloodPressure = scatterChart;
};

// 初始化活动情况与健康状态图表 - 大屏优化版
const initActivityHealthChart = (data) => {
  const chartDom = document.getElementById('activity-health-chart');
  if (!chartDom) return;
  
  // 设置自适应尺寸
  const parent = chartDom.parentElement;
  if (parent) {
    chartDom.style.width = parent.clientWidth + 'px';
    chartDom.style.height = parent.clientHeight + 'px';
  } else {
    chartDom.style.width = '100%';
    chartDom.style.height = '100%';
  }
  
  const activityChart = echarts.init(chartDom);
  charts.activityHealth = activityChart;
  
  // 计算活动与健康状态数据（转换为数字类型）
  const activeHealthy = data.filter(item => 
    Number(item.active) === 1 && Number(item.cardio) === 0
  ).length;
  const activeUnhealthy = data.filter(item => 
    Number(item.active) === 1 && Number(item.cardio) === 1
  ).length;
  const inactiveHealthy = data.filter(item => 
    Number(item.active) === 0 && Number(item.cardio) === 0
  ).length;
  const inactiveUnhealthy = data.filter(item => 
    Number(item.active) === 0 && Number(item.cardio) === 1
  ).length;
  
  // 计算总计和百分比数据
  const totalActive = activeHealthy + activeUnhealthy;
  const totalInactive = inactiveHealthy + inactiveUnhealthy;
  const totalHealthy = activeHealthy + inactiveHealthy;
  const totalUnhealthy = activeUnhealthy + inactiveUnhealthy;
  
  const activeHealthyPct = totalActive > 0 ? ((activeHealthy / totalActive) * 100).toFixed(1) : '0';
  const activeUnhealthyPct = totalActive > 0 ? ((activeUnhealthy / totalActive) * 100).toFixed(1) : '0';
  const inactiveHealthyPct = totalInactive > 0 ? ((inactiveHealthy / totalInactive) * 100).toFixed(1) : '0';
  const inactiveUnhealthyPct = totalInactive > 0 ? ((inactiveUnhealthy / totalInactive) * 100).toFixed(1) : '0';

  // 无数据时显示提示
  if (activeHealthy + activeUnhealthy + inactiveHealthy + inactiveUnhealthy === 0) {
    activityChart.setOption({
      backgroundColor: 'transparent',
      title: {
        text: '无活动与健康数据可展示',
        left: 'center',
        top: '50%',
        textStyle: { color: '#f87171', fontSize: 16 }
      },
      grid: { 
        left: '15%', 
        right: '10%', 
        bottom: '15%', 
        top: '10%',
        backgroundColor: 'rgba(59, 130, 246, 0.05)',
        borderColor: 'rgba(59, 130, 246, 0.2)',
        borderWidth: 1
      }
    });
    return;
  }
  
  // 大屏优化的配置
  activityChart.setOption({
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { 
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(59, 130, 246, 0.1)'
        }
      },
      formatter: function(params) {
        // 获取当前类别的数据
        const isActiveCategory = params[0].name === '活跃';
        const healthyCount = isActiveCategory ? activeHealthy : inactiveHealthy;
        const unhealthyCount = isActiveCategory ? activeUnhealthy : inactiveUnhealthy;
        const totalCount = healthyCount + unhealthyCount;
        const healthyPct = isActiveCategory ? activeHealthyPct : inactiveHealthyPct;
        const unhealthyPct = isActiveCategory ? activeUnhealthyPct : inactiveUnhealthyPct;
        
        // 自定义格式化tooltip
        return `<div style="background: rgba(15, 23, 42, 0.9); border: 1px solid #3b82f6; padding: 12px; border-radius: 8px; min-width: 220px;">
          <div style="font-weight: bold; color: #ffffff; margin-bottom: 8px; font-size: 14px;">${params[0].name}人群</div>
          <div style="display: flex; justify-content: space-between; margin-bottom: 6px;">
            <span style="display: inline-block; width: 10px; height: 10px; background: #4ade80; border-radius: 50%; margin-right: 8px;"></span>
            <span style="color: #e2e8f0;">健康:</span>
            <span style="color: #4ade80; font-weight: bold;">${healthyCount} (${healthyPct}%)</span>
          </div>
          <div style="display: flex; justify-content: space-between; margin-bottom: 6px;">
            <span style="display: inline-block; width: 10px; height: 10px; background: #f87171; border-radius: 50%; margin-right: 8px;"></span>
            <span style="color: #e2e8f0;">患病:</span>
            <span style="color: #f87171; font-weight: bold;">${unhealthyCount} (${unhealthyPct}%)</span>
          </div>
          <div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(59, 130, 246, 0.3);">
            <span style="color: #38bdf8; font-weight: bold;">总计:</span> ${totalCount}
          </div>
        </div>`;
      },
      backgroundColor: 'transparent',
      padding: 0
    },
    legend: {
      data: ['健康', '患病'],
      textStyle: { 
        color: '#94a3b8',
        fontSize: 13,
        fontWeight: 'bold'
      },
      top: 15,
      itemWidth: 14,
      itemHeight: 14,
      itemGap: 25
    },
    grid: {
      left: '12%',
      right: '8%',
      bottom: '15%',
      top: '25%',
      containLabel: true,
      backgroundColor: 'transparent',
      borderColor: 'rgba(59, 130, 246, 0.1)',
      borderWidth: 1
    },
    xAxis: {
      type: 'category',
      data: ['不活跃', '活跃'],
      axisLine: {
        lineStyle: {
          color: '#475569'
        }
      },
      axisLabel: {
        color: '#94a3b8',
        fontSize: 12,
        fontWeight: 'bold',
        interval: 0
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: '人数',
      nameTextStyle: {
        color: '#94a3b8',
        fontSize: 12,
        fontWeight: 'bold',
        padding: [0, 0, 0, 40]
      },
      axisLine: {
        lineStyle: {
          color: '#475569'
        }
      },
      axisLabel: {
        color: '#94a3b8',
        fontSize: 10
      },
      splitLine: {
        lineStyle: {
          color: '#1e293b',
          type: 'dashed',
          opacity: 0.5
        }
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: '健康',
        type: 'bar',
        stack: 'total',
        emphasis: { 
          focus: 'series',
          itemStyle: {
            shadowBlur: 15,
            shadowColor: 'rgba(74, 222, 128, 0.5)'
          }
        },
        itemStyle: { 
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#4ade80' },
            { offset: 1, color: '#22c55e' }
          ]),
          borderRadius: [4, 4, 0, 0],
          shadowBlur: 8,
          shadowColor: 'rgba(34, 197, 94, 0.3)',
          shadowOffsetY: 3
        },
        data: [inactiveHealthy, activeHealthy],
        barWidth: '50%',
        animationDelay: function(idx) {
          return idx * 100;
        }
      },
      {
        name: '患病',
        type: 'bar',
        stack: 'total',
        emphasis: { 
          focus: 'series',
          itemStyle: {
            shadowBlur: 15,
            shadowColor: 'rgba(248, 113, 113, 0.5)'
          }
        },
        itemStyle: { 
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#f87171' },
            { offset: 1, color: '#ef4444' }
          ]),
          borderRadius: [0, 0, 4, 4],
          shadowBlur: 8,
          shadowColor: 'rgba(239, 68, 68, 0.3)',
          shadowOffsetY: 3
        },
        data: [inactiveUnhealthy, activeUnhealthy],
        barWidth: '50%',
        animationDelay: function(idx) {
          return idx * 100 + 100;
        }
      },
      // 添加总计数值标签
      {
        name: '总计',
        type: 'scatter',
        data: [[0, totalInactive], [1, totalActive]],
        symbol: 'none',
        label: {
          show: true,
          position: 'top',
          formatter: function(params) {
            const isActive = params.data[0] === 1;
            const healthRate = isActive ? activeHealthyPct : inactiveHealthyPct;
            return `${params.value[1]}\n(健康率: ${healthRate}%)`;
          },
          color: '#ffffff',
          fontSize: 11,
          fontWeight: 'bold',
          lineHeight: 18,
          offset: [0, -10]
        },
        z: 10
      }
    ],
    animationEasing: 'elasticOut',
    animationDuration: 1000
  });
  
  // 添加窗口大小变化监听，确保图表自适应
  window.addEventListener('resize', () => {
    // 延迟执行以确保DOM已更新
    setTimeout(() => activityChart.resize(), 100);
  });
  
  charts.activityHealth = activityChart;
};

// 初始化胆固醇水平分布图表
const initCholesterolChart = (data) => {
  const chartDom = document.getElementById('cholesterol-chart');
  if (!chartDom) {
    console.error('Cholesterol chart DOM not found');
    return;
  }
  
  // 使用容器高度自适应
  const parent = chartDom.parentElement;
  if (parent) {
    const width = parent.clientWidth || 400;
    const height = parent.clientHeight || 400;
    chartDom.style.width = width + 'px';
    chartDom.style.height = height + 'px';
  } else {
    chartDom.style.width = '100%';
    chartDom.style.height = '100%';
  }
  
  const cholesterolChart = echarts.init(chartDom);
  // 添加窗口大小变化监听，确保图表自适应
  window.addEventListener('resize', () => {
    // 延迟执行以确保DOM已更新
    setTimeout(() => cholesterolChart.resize(), 100);
  });
  
  // 计算胆固醇水平分布（转换为数字类型）
  const validCholData = data.filter(item => 
    [1, 2, 3].includes(Number(item.cholesterol))
  );
  const cholesterolLevels = {
    normal: validCholData.filter(item => Number(item.cholesterol) === 1).length,
    elevated: validCholData.filter(item => Number(item.cholesterol) === 2).length,
    high: validCholData.filter(item => Number(item.cholesterol) === 3).length
  };

  // 无数据时显示提示
  if (cholesterolLevels.normal + cholesterolLevels.elevated + cholesterolLevels.high === 0) {
    cholesterolChart.setOption({
      backgroundColor: 'transparent',
      title: {
        text: '无胆固醇数据可展示',
        left: 'center',
        top: '50%',
        textStyle: { color: '#f87171', fontSize: 16 }
      },
      grid: { 
        left: '3%', 
        right: '4%', 
        bottom: '3%', 
        top: '15%', 
        containLabel: true,
        backgroundColor: 'rgba(59, 130, 246, 0.05)',
        borderColor: 'rgba(59, 130, 246, 0.2)',
        borderWidth: 1
      }
    });
    charts.cholesterol = cholesterolChart;
    return;
  }
  
  const customColors = [
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#4ade80' },
      { offset: 1, color: '#22c55e' }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#fbbf24' },
      { offset: 1, color: '#f59e0b' }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#f87171' },
      { offset: 1, color: '#ef4444' }
    ])
  ];
  
  // 计算百分比数据
  const totalChol = cholesterolLevels.normal + cholesterolLevels.elevated + cholesterolLevels.high;
  const percentages = [
    Math.round((cholesterolLevels.normal / totalChol) * 100),
    Math.round((cholesterolLevels.elevated / totalChol) * 100),
    Math.round((cholesterolLevels.high / totalChol) * 100)
  ];

  cholesterolChart.setOption({
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { 
        type: 'cross',
        shadowStyle: {
          color: 'rgba(59, 130, 246, 0.3)'
        }
      },
      backgroundColor: 'rgba(15, 23, 42, 0.8)',
      borderColor: '#3b82f6',
      textStyle: { color: '#e2e8f0' },
      formatter: function(params) {
        let result = params[0].name + '<br/>';
        params.forEach(item => {
          result += item.marker + item.seriesName + ': ' + 
                    item.value + (item.seriesName === '占比' ? '%' : '') + '<br/>';
        });
        return result;
      }
    },
    legend: {
      data: ['正常', '偏高', '高', '占比'],
      textStyle: { color: '#38bdf8' },
      itemWidth: 12,
      itemHeight: 12,
      top: 0
    },
    xAxis: {
      type: 'category',
      data: ['正常(1)', '偏高(2)', '高(3)'],
      axisLine: { lineStyle: { color: '#3b82f6' } },
      axisLabel: { color: '#94a3b8' },
      axisTick: {
        lineStyle: { color: 'rgba(59, 130, 246, 0.3)' }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '人数',
        nameTextStyle: { color: '#38bdf8' },
        axisLine: { lineStyle: { color: '#3b82f6' } },
        axisLabel: { color: '#94a3b8' },
        splitLine: { 
          lineStyle: { 
            color: 'rgba(59, 130, 246, 0.2)',
            type: 'dashed'
          } 
        },
        axisTick: {
          lineStyle: { color: 'rgba(59, 130, 246, 0.3)' }
        }
      },
      {
        type: 'value',
        name: '占比(%)',
        nameTextStyle: { color: '#38bdf8' },
        axisLine: { lineStyle: { color: '#3b82f6' } },
        axisLabel: { color: '#94a3b8', formatter: '{value}%' },
        splitLine: { show: false },
        axisTick: {
          lineStyle: { color: 'rgba(59, 130, 246, 0.3)' }
        }
      }
    ],
    series: [
      {
        name: '正常',
        type: 'bar',
        data: [cholesterolLevels.normal, 0, 0],
        itemStyle: { 
          color: customColors[0],
          borderRadius: [4, 4, 0, 0],
          shadowBlur: 5,
          shadowColor: 'rgba(34, 197, 94, 0.5)'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(34, 197, 94, 0.8)'
          }
        }
      },
      {
        name: '偏高',
        type: 'bar',
        data: [0, cholesterolLevels.elevated, 0],
        itemStyle: { 
          color: customColors[1],
          borderRadius: [4, 4, 0, 0],
          shadowBlur: 5,
          shadowColor: 'rgba(245, 158, 11, 0.5)'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(245, 158, 11, 0.8)'
          }
        }
      },
      {
        name: '高',
        type: 'bar',
        data: [0, 0, cholesterolLevels.high],
        itemStyle: { 
          color: customColors[2],
          borderRadius: [4, 4, 0, 0],
          shadowBlur: 5,
          shadowColor: 'rgba(239, 68, 68, 0.5)'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(239, 68, 68, 0.8)'
          }
        }
      },
      {
        name: '占比',
        type: 'line',
        yAxisIndex: 1,
        data: percentages,
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          color: '#38bdf8',
          width: 3,
          shadowBlur: 5,
          shadowColor: 'rgba(56, 189, 248, 0.5)'
        },
        itemStyle: {
          color: '#38bdf8',
          borderColor: '#fff',
          borderWidth: 2
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(56, 189, 248, 0.8)'
          }
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(56, 189, 248, 0.3)' },
            { offset: 1, color: 'rgba(56, 189, 248, 0.05)' }
          ])
        }
      }
    ],
    grid: { 
      left: '3%', 
      right: '4%', 
      bottom: '3%', 
      top: '15%', 
      containLabel: true,
      backgroundColor: 'rgba(59, 130, 246, 0.05)',
      borderColor: 'rgba(59, 130, 246, 0.2)',
      borderWidth: 1
    }
  });
  
  charts.cholesterol = cholesterolChart;
};

// 初始化年龄段健康评分图表
const initAgeHealthChart = (data) => {
  const chartDom = document.getElementById('age-health-chart');
  if (!chartDom) {
    console.error('Age health chart DOM not found');
    return;
  }
  
  // 使用容器高度自适应
  const parent = chartDom.parentElement;
  if (parent) {
    const width = parent.clientWidth || 400;
    const height = parent.clientHeight || 400;
    chartDom.style.width = width + 'px';
    chartDom.style.height = height + 'px';
  } else {
    chartDom.style.width = '100%';
    chartDom.style.height = '100%';
  }
  
  const ageHealthChart = echarts.init(chartDom);
  // 添加窗口大小变化监听，确保图表自适应
  window.addEventListener('resize', () => {
    // 延迟执行以确保DOM已更新
    setTimeout(() => ageHealthChart.resize(), 100);
  });
  
  // 定义年龄组
  const ageGroups = ['10-19岁', '20-29岁', '30-39岁', '40-49岁', '50-59岁', '60岁以上'];
  
  // 计算各年龄段健康状况（转换为数字类型）
  const ageHealthData = ageGroups.map(group => {
    let filteredData = [];
    switch(group) {
      case '10-19岁':
        filteredData = data.filter(item => 
          !isNaN(Number(item.AgeinYr)) && item.AgeinYr >= 10 && item.AgeinYr < 20
        );
        break;
      case '20-29岁':
        filteredData = data.filter(item => 
          !isNaN(Number(item.AgeinYr)) && item.AgeinYr >= 20 && item.AgeinYr < 30
        );
        break;
      case '30-39岁':
        filteredData = data.filter(item => 
          !isNaN(Number(item.AgeinYr)) && item.AgeinYr >= 30 && item.AgeinYr < 40
        );
        break;
      case '40-49岁':
        filteredData = data.filter(item => 
          !isNaN(Number(item.AgeinYr)) && item.AgeinYr >= 40 && item.AgeinYr < 50
        );
        break;
      case '50-59岁':
        filteredData = data.filter(item => 
          !isNaN(Number(item.AgeinYr)) && item.AgeinYr >= 50 && item.AgeinYr < 60
        );
        break;
      case '60岁以上':
        filteredData = data.filter(item => 
          !isNaN(Number(item.AgeinYr)) && item.AgeinYr >= 60
        );
        break;
    }
    
    return {
      healthy: filteredData.filter(item => Number(item.cardio) === 0).length,
      unhealthy: filteredData.filter(item => Number(item.cardio) === 1).length
    };
  });

  // 无数据时显示提示
  const totalDataCount = ageHealthData.reduce((sum, item) => sum + item.healthy + item.unhealthy, 0);
  if (totalDataCount === 0) {
    ageHealthChart.setOption({
      backgroundColor: 'transparent',
      title: {
        text: '无年龄段健康数据可展示',
        left: 'center',
        top: '50%',
        textStyle: { color: '#f87171', fontSize: 16 }
      },
      grid: { 
        left: '3%', 
        right: '4%', 
        bottom: '3%', 
        top: '15%', 
        containLabel: true,
        backgroundColor: 'rgba(59, 130, 246, 0.05)',
        borderColor: 'rgba(59, 130, 246, 0.2)',
        borderWidth: 1
      }
    });
    charts.ageHealth = ageHealthChart;
    return;
  }
  
  ageHealthChart.setOption({
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { 
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(59, 130, 246, 0.3)'
        }
      },
      backgroundColor: 'rgba(15, 23, 42, 0.8)',
      borderColor: '#3b82f6',
      textStyle: { color: '#e2e8f0' }
    },
    legend: {
      data: ['健康', '患病'],
      textStyle: { color: '#38bdf8' },
      itemWidth: 12,
      itemHeight: 12,
      top: 0
    },
    yAxis: {
      type: 'category',
      data: ageGroups,
      axisLine: { lineStyle: { color: '#3b82f6' } },
      axisLabel: { 
        color: '#94a3b8'
      },
      axisTick: {
        lineStyle: { color: 'rgba(59, 130, 246, 0.3)' }
      }
    },
    xAxis: {
      type: 'value',
      name: '人数',
      nameTextStyle: { color: '#38bdf8' },
      axisLine: { lineStyle: { color: '#3b82f6' } },
      axisLabel: { color: '#94a3b8' },
      splitLine: { 
        lineStyle: { 
          color: 'rgba(59, 130, 246, 0.2)',
          type: 'dashed'
        } 
      },
      axisTick: {
        lineStyle: { color: 'rgba(59, 130, 246, 0.3)' }
      }
    },
    series: [
      {
        name: '健康',
        type: 'bar',
        stack: 'total',
        data: ageHealthData.map(item => item.healthy),
        itemStyle: { 
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#4ade80' },
            { offset: 1, color: '#22c55e' }
          ]),
          borderRadius: [0, 4, 4, 0],
          shadowBlur: 5,
          shadowColor: 'rgba(34, 197, 94, 0.5)'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(34, 197, 94, 0.8)'
          }
        }
      },
      {
        name: '患病',
        type: 'bar',
        stack: 'total',
        data: ageHealthData.map(item => item.unhealthy),
        itemStyle: { 
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#f87171' },
            { offset: 1, color: '#ef4444' }
          ]),
          borderRadius: [0, 4, 4, 0],
          shadowBlur: 5,
          shadowColor: 'rgba(239, 68, 68, 0.5)'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(239, 68, 68, 0.8)'
          }
        }
      }
    ],
    grid: { 
      left: '3%', 
      right: '4%', 
      bottom: '3%', 
      top: '15%', 
      containLabel: true,
      backgroundColor: 'rgba(59, 130, 246, 0.05)',
      borderColor: 'rgba(59, 130, 246, 0.2)',
      borderWidth: 1
    }
  });
  
  charts.ageHealth = ageHealthChart;
};

// 初始化所有图表（大屏自适应优化）
const initCharts = (data) => {
  if (!data.length) return;
  
  // 清除之前的图表实例，避免内存泄漏
  Object.values(charts).forEach(chart => chart && chart.dispose());
  charts = {};
  
  initBmiChart(data);
  initBloodPressureChart(data);
  initAgeHealthChart(data);
  initCholesterolChart(data);
  
  // 大屏布局强制重新计算
  setTimeout(() => {
    Object.values(charts).forEach(chart => chart && chart.resize());
  }, 500);
  
  // 窗口大小变化防抖处理
  let resizeTimer;
  const handleResize = () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
      // 大屏布局下的容器尺寸更新
      Object.values(charts).forEach(chart => {
        if (chart) {
          const dom = chart.getDom();
          if (dom) {
            const parent = dom.parentElement;
            if (parent) {
              dom.style.width = parent.clientWidth + 'px';
              dom.style.height = parent.clientHeight + 'px';
            }
          }
          chart.resize();
        }
      });
    }, 300);
  };
  
  // 移除之前的监听器，避免重复绑定
  window.removeEventListener('resize', handleResize);
  window.addEventListener('resize', handleResize);
};

// 页面加载完成后初始化
onMounted(async () => {
  // 加载数据并初始化图表
  console.log('开始加载数据...');
  const data = await loadExcelData();
  console.log('数据加载完成，数据量:', data.length);
  
  // 延迟初始化确保DOM已渲染
  await nextTick();
  setTimeout(() => {
    console.log('开始初始化图表...');
    initCharts(data);
    console.log('图表初始化完成');
  }, 100);
});

// 组件卸载前清理
onBeforeUnmount(() => {
  // 清除所有图表实例
  Object.values(charts).forEach(chart => chart && chart.dispose());
});
</script>

<style>
/* 全局重置，确保无边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  min-height: 100vh;
  background: #050a14;
  position: relative;
}
#app {
  width: 100%;
  min-height: 100vh;
  position: relative;
  margin: 0;
  padding: 0;
}
/* 科技风格的背景和文字 */
body {
  background: #050a14;
  color: #e0f2fe;
  font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}
</style>

<style scoped>
/* 数据大屏主容器 - 全屏铺满 */
.screen-container {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #050a14 0%, #0c1628 100%);
  color: #e2e8f0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 100;
  box-sizing: border-box;
}

/* 科技风格背景网格 */
.screen-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: -1px -1px;
  pointer-events: none;
  z-index: 0;
}

/* 大屏标题区域 */
.screen-header {
  background-color: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
  padding: 0.8rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.1);
  z-index: 10;
  flex-shrink: 0;
  width: 100%;
}

.screen-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: #38bdf8;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
  letter-spacing: 1px;
  margin: 0;
}

.header-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.user-welcome {
  color: #e2e8f0;
  font-size: 1rem;
  background: linear-gradient(90deg, #94a3b8, #cbd5e1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-detail {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  border: 1px solid rgba(59, 130, 246, 0.5);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.btn-detail:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(59, 130, 246, 0.5);
}

/* 核心数据指标区域 */
.metrics-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  padding: 0.8rem 2rem;
  flex-shrink: 0;
  z-index: 1;
  width: 100%;
}

.metric-item {
  background-color: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 0.8rem;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.metric-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(59, 130, 246, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  border-color: rgba(59, 130, 246, 0.5);
}

.metric-icon {
  font-size: 2rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  flex-shrink: 0;
}

.metric-content {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.metric-number {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
}

.metric-desc {
  font-size: 0.75rem;
  color: #94a3b8;
  opacity: 0.9;
  flex-shrink: 0;
}

.metric-trend {
  font-size: 0.875rem;
  font-weight: bold;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  min-width: 50px;
  text-align: center;
}

.metric-trend.positive {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
}

.metric-trend.negative {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.2);
}

/* 图表网格布局 */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  padding: 1rem;
  width: 100%;
  z-index: 1;
  box-sizing: border-box;
}

.chart-panel {
  background-color: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  min-height: 480px;
  width: 100%;
}

.chart-panel.full-width {
  grid-column: 1 / -1;
}

.panel-header {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.panel-title {
  font-size: 1rem;
  font-weight: bold;
  color: #e2e8f0;
  margin: 0;
}

.panel-subtitle {
  font-size: 0.7rem;
  color: #94a3b8;
  margin: 0;
}

.chart-wrapper {
  flex: 1;
  padding: 1rem;
  position: relative;
  min-height: 400px;
  overflow: hidden;
}

.chart-wrapper > div {
  width: 100%;
  height: 100%;
  min-height: 400px;
}

/* BMI图例样式 */
.bmi-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #94a3b8;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(59, 130, 246, 0.3);
}

.legend-dot.underweight { background-color: #34d399; }
.legend-dot.normal { background-color: #60a5fa; }
.legend-dot.overweight { background-color: #fbbf24; }
.legend-dot.obese { background-color: #f87171; }

/* 数据概览统计信息 */
.data-overview {
  background-color: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(59, 130, 246, 0.3);
  padding: 0.6rem 2rem;
  display: flex;
  justify-content: center;
  gap: 3rem;
  z-index: 10;
  flex-shrink: 0;
  width: 100%;
}

.overview-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.overview-label {
  color: #94a3b8;
  font-size: 0.875rem;
}

.overview-value {
  color: #38bdf8;
  font-size: 0.875rem;
  font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 1600px) {
  .metrics-overview {
    gap: 1rem;
    padding: 1rem 1.5rem;
  }
  
  .chart-grid {
    gap: 1rem;
    padding: 0 1.5rem 1rem 1.5rem;
  }
  
  .metric-number {
    font-size: 1.5rem;
  }
  
  .screen-title {
    font-size: 1.75rem;
  }
}

@media (max-width: 1400px) {
  .chart-panel {
    min-height: 400px;
  }
  
  .chart-grid {
    grid-template-columns: 1fr;
  }
  
  .metrics-overview {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .data-overview {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}

/* 科技风格背景网格 */
.screen-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: -1px -1px;
  pointer-events: none;
  z-index: 0;
  animation: gridMove 60s linear infinite;
}

@keyframes gridMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 60px 60px;
  }
}

/* 大屏标题区域 */
.screen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: rgba(13, 17, 23, 0.8);
  border-radius: 12px;
  margin-bottom: 1rem;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.screen-title {
  font-size: 2.2rem;
  font-weight: bold;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
}

.header-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.user-welcome {
  font-size: 1.1rem;
  color: #94a3b8;
}

.btn-detail {
  padding: 0.6rem 1.2rem;
  background: linear-gradient(45deg, #3b82f6, #60a5fa);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid rgba(59, 130, 246, 0.5);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.btn-detail:hover {
  background: linear-gradient(45deg, #2563eb, #3b82f6);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* 核心数据指标区域 */
.metrics-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  z-index: 1;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.metric-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #38bdf8, #0284c7);
  opacity: 0.8;
}

.metric-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
  border-color: rgba(59, 130, 246, 0.5);
}

.metric-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  font-size: 1.8rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.bmi-icon { background: linear-gradient(45deg, #f87171, #fb923c); }
.bp-icon { background: linear-gradient(45deg, #60a5fa, #3b82f6); }
.cholesterol-icon { background: linear-gradient(45deg, #a78bfa, #8b5cf6); }
.risk-icon { background: linear-gradient(45deg, #fb7185, #ec4899); }

.metric-content {
  flex: 1;
}

.metric-number {
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
  line-height: 1.2;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.metric-desc {
  font-size: 0.95rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}

.metric-trend {
  font-size: 1rem;
  font-weight: 500;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.metric-trend.positive {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.metric-trend.negative {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

/* 图表网格布局 */
.chart-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 300px;
  gap: 1rem;
  padding: 1rem;
  z-index: 1;
}

.chart-panel {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.95));
  border-radius: 12px;
  padding: 1.2rem;
  border: 1px solid rgba(59, 130, 246, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: all 0.3s ease;
}

.chart-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0), #3b82f6, rgba(59, 130, 246, 0));
}

.chart-panel:hover {
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.4);
}

.chart-panel.full-width {
  grid-column: span 2;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.panel-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 0 5px rgba(56, 189, 248, 0.2);
}

.panel-subtitle {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-top: 0.2rem;
}

.chart-wrapper {
  flex: 1;
  position: relative;
  min-height: 320px; /* 使用固定像素值代替百分比，确保图表有足够的显示空间 */
  overflow: hidden;
}

/* BMI图例样式 */
.bmi-legend {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #94a3b8;
  transition: color 0.3s ease;
}

.legend-item:hover {
  color: #38bdf8;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.legend-dot.underweight { 
  background-color: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
}
.legend-dot.normal { 
  background-color: #60a5fa;
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}
.legend-dot.overweight { 
  background-color: #fbbf24;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}
.legend-dot.obese { 
  background-color: #f87171;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.5);
}

/* 图表容器样式 */
#bmi-chart,
#blood-pressure-scatter,
#activity-health-chart,
#cholesterol-chart,
#age-health-chart {
  width: 100% !important;
  height: 100% !important;
  min-height: 350px !important;
}

/* 数据概览统计信息 */
.data-overview {
  display: flex;
  justify-content: center;
  gap: 3rem;
  padding: 1rem;
  background: rgba(13, 17, 23, 0.8);
  border-radius: 8px;
  margin-top: 1rem;
  border: 1px solid rgba(59, 130, 246, 0.1);
  z-index: 1;
}

.overview-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.overview-label {
  font-size: 0.9rem;
  color: #94a3b8;
}

.overview-value {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 0 5px rgba(56, 189, 248, 0.1);
}

/* 响应式设计 - 确保在不同屏幕尺寸下都能完整显示 */
@media (max-width: 1400px) {
  .chart-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, minmax(300px, 1fr));
  }
  
  .chart-panel.full-width {
    grid-column: span 1;
  }
  
  .metrics-overview {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .screen-title {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .metrics-overview {
    grid-template-columns: 1fr;
  }
  
  .data-overview {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }
  
  .screen-header {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  
  .screen-title {
    font-size: 1.5rem;
  }
}

</style>
